<template>
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
      <el-input v-model="input2" style="width: 200px;" placeholder="请输入检查信息" />
    </div>
    <div>
      <!-- 留言列表 -->
      <el-table :data="arr" border style="width: 100%" :header-cell-style="{background:'#4ea0ff',textAlign:'center'}"
                :header-row-style="{color:'white'}">
        <!-- 序号列 -->
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <!-- 用户名列 -->
        <el-table-column prop="nickname" label="用户名" width="200" align="center"></el-table-column>
        <!-- 密码列 -->
        <el-table-column prop="password" label="密码" width="200" align="center"></el-table-column>
        <!-- 评论内容列 -->
        <el-table-column prop="Comment" label="评论内容" width="200" align="center"></el-table-column>
        <!-- 房屋评价ID容列 -->
        <el-table-column prop="comment_id" label="房屋评价ID" width="200" align="center"></el-table-column>
        <!-- 审核状态列 -->
        <el-table-column prop="Review" label="审核状态" width="200" align="center">
          <!-- 审核状态开关 -->
          <template #default="{ row }">
            <el-switch v-model="row.Review" active-value="已审核" inactive-value="未审核" @change="handleSwitchChange(row)"></el-switch>
          </template>
        </el-table-column>
        <!-- 发布时间列 -->
        <el-table-column prop="createTime" label="发布时间" width="200" align="center"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" align="center">
          <!-- 操作按钮组 -->
          <template #default="scope">
            <el-button-group>
              <!-- 删除按钮 -->
              <el-button type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElDialog } from 'element-plus';

const input2 = ref('');
const dialogVisible = ref(false);

const del = (id, row) => {
  if (confirm('就不删,别瞎几把点')) {
    ElMessage.success('删除成功');
    arr.value.splice(id,1);
  }
};


// 初始留言数据
const arr = ref([
  { index: '01',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '已审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '02',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '未审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '03',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '已审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '04',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '未审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '05',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '已审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '06',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '未审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '07',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '已审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '08',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '未审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '09',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '已审核',
    createTime: '2024-4-10 15:17:22' },

  { index: '10',
    nickname: '佳乐',
    password: '123456',
    Comment: '好好好',
    comment_id: '1',
    Review: '未审核',
    createTime: '2024-4-10 15:17:22' },
]);

// 分类数据
const catTypeArr = ref([]);


// 处理审核状态变化的函数
const handleSwitchChange = (row) => {
  const status = row.Review === '已审核' ? '审核通过' : '待审核';
  ElMessage.success(`ID为 ${row.comment_id} 的审核状态已更新为：${status}`);
};

</script>

<style scoped>

</style>